﻿@page "/progress"

<h1>Progress</h1>

<div class="docs-example">
    <div className="text-center">0%</div>
    <BSProgress />
    <div className="text-center">25%</div>
    <BSProgress Value="25" />
    <div className="text-center">50%</div>
    <BSProgress Value="50" />
    <div className="text-center">75%</div>
    <BSProgress Value="75" />
    <div className="text-center">100%</div>
    <BSProgress Value="100" />
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/progressbars/progressbars1.html" />

<h3>Labels</h3>
<div class="docs-example">
    <BSProgress Value="25">25%</BSProgress>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/progressbars/progressbars2.html" />

<h3>Height</h3>

<div class="docs-example">
    <BSProgress Value="25" style="height: 1px;" />
    <BSProgress Value="25" style="height: 20px;" />
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/progressbars/progressbars3.html" />

<h3>Backgrounds</h3>
<div class="docs-example">
    <BSProgress Value="25" Color="Color.Success" />
    <BSProgress Value="50" Color="Color.Info" />
    <BSProgress Value="75" Color="Color.Warning" />
    <BSProgress Value="100" Color="Color.Danger" />
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/progressbars/progressbars4.html" />

<h3>Multiple bars</h3>
<div class="docs-example">
    <BSProgress IsMulti="true">
        <BSProgress IsBar="true" Value="15" />
        <BSProgress IsBar="true" Value="30" Color="Color.Success" />
        <BSProgress IsBar="true" Value="20" Color="Color.Info" />
    </BSProgress>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/progressbars/progressbars5.html" />

<h3>Striped</h3>
<div class="docs-example">
    <BSProgress Value="10" IsStriped="true" />
    <BSProgress Value="25" Color="Color.Success" IsStriped="true" />
    <BSProgress Value="50" Color="Color.Info" IsStriped="true" />
    <BSProgress Value="75" Color="Color.Warning" IsStriped="true" />
    <BSProgress Value="100" Color="Color.Danger" IsStriped="true" />
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/progressbars/progressbars6.html" />

<h4>Animated stripes</h4>

<div class="docs-example">
    <BSProgress Value="75" IsStriped="true" IsAnimated="true" />
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/progressbars/progressbars7.html" />
